<template>
  <div class="v-model-count g-fs-14 g-bloder">
    <div
      v-for="(item, index) in config"
      :key="index"
      :class="{ 'g-disabled': item.disabled }"
      class="v-model-count-statistic"
    >
      <img :src="item.icon" />
      <span class="v-model-count-label">{{ $t(item.label) }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { projectService } from "@/modules/model/service";
import { locale } from "@/util/locale";
import { inject, ref } from "vue";

// 请求接口，获取加载数据
const added = ref(0);
const deleted = ref(0);
const modified = ref(0);
const targetProjectId = inject("targetProjectId") as string;
const sourceProjectId = inject("sourceProjectId") as string;
projectService.projectMergeQueryStatistics(targetProjectId, sourceProjectId).then(res => {
  added.value = res.data.added;
  deleted.value = res.data.deleted;
  modified.value = res.data.modified;
});

const lang = locale.value;

const config = [
  {
    icon: "statics/icons/projectMerge/modified.svg",
    get label() {
      return lang === "en" ? "modified（" + modified.value + "）" : "修改（" + modified.value + "）";
    },
    tips: "当前模型存在变更",
    disabled: false
  },
  {
    icon: "statics/icons/projectMerge/innerchanged.svg",
    label: "内部存在变更",
    tips: "当前模型的后代模型存在",
    disabled: false
  },
  {
    icon: "statics/icons/projectMerge/in.svg",
    label: "位置移入",
    tips: "位置移入",
    disabled: false
  },
  {
    icon: "statics/icons/projectMerge/added.svg",
    get label() {
      return lang === "en" ? "added（" + added.value + "）" : "新增（" + added.value + "）";
    },
    tips: "当前模型属于新增的模型",
    disabled: false
  },
  {
    icon: "statics/icons/projectMerge/reject.svg",
    label: "拒绝",
    tips: "拒绝当前模型的变更",
    disabled: false
  },
  {
    icon: "statics/icons/projectMerge/out.svg",
    label: "位置移出",
    tips: "位置移出",
    disabled: false
  },
  {
    icon: "statics/icons/projectMerge/deleted.svg",
    get label() {
      return lang === "en" ? "deleted（" + deleted.value + "）" : "删除（" + deleted.value + "）";
    },
    tips: "当前模型属于被删除的模型",
    disabled: false
  },
  {
    icon: "statics/icons/projectMerge/accept.svg",
    label: "接受",
    tips: "接受当前模型的变更",
    disabled: false
  }
];
</script>

<style lang="scss" scoped>
.v-model-count {
  display: grid;
  padding: 12px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  align-items: center;
  &-statistic {
    margin-left: 12px;
    margin-bottom: 6px;
  }
  .v-model-count-label {
    margin-left: 2px;
  }
}
</style>
